<script setup>
import { OlMap, OlView } from '@sw/v-ol'
import BasinJson from './components/basinJson/index.vue'
import CustomView from './components/custom/index.vue'
import RealTimeView from './components/realTime/index.vue'

const page = ref('history')
const bscd = ref('11200260')
provide('bscd', bscd)
</script>

<template>
  <div class="h-screen flex flex-col space-y-[8px] p-[8px] bg-[#0e1523]">
    <el-radio-group v-model="page">
      <el-radio-button label="实时预报结果" value="history" />
      <el-radio-button label="自定义降水" value="custorm" />
    </el-radio-group>
    <div class="flex-1 flex space-x-[16px]">
      <div class="flex-1 relative">
        <div class="absolute inset-0 bg-[#1b2943] rounded-lg">
          <OlMap class="h-full">
            <OlView />
            <BasinJson :code="bscd" />
          </OlMap>
        </div>
      </div>
      <div class="flex-1 relative">
        <div class="absolute inset-0">
          <RealTimeView v-if="page === 'history'" />
          <CustomView v-else />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>
